<template>
	<div v-show="loading" id="loading">
		<div class="loader">
			<div class="loader-inner la-pacman la-2x">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "LoadingPage",
	computed: {
		loading() {
			return this.$store.state.loading;
		}
	},
	watch: {
		loading: {
			immediate: true,
			handler(n) {
				let htmlBodyElement = document.querySelector('body');
				htmlBodyElement.style.overflowY = n ? 'hidden' : 'auto';
			}
		}
	}
}
</script>

<style scoped>
#loading {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #F9F9F9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader {
	box-sizing: border-box;
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 25%;
	max-width: 25%;
	height: 200px;
	align-items: center;
	justify-content: center;
}

.la-pacman, .la-pacman > div {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.la-pacman {
	display: block;
	font-size: 0;
	color: #d81e06;
}

.la-pacman.la-dark {
	color: #333
}

.la-pacman > div {
	display: inline-block;
	float: none;
	background-color: currentColor;
	border: 0 solid currentColor
}

.la-pacman {
	width: 32px;
	height: 32px
}

.la-pacman > div:nth-child(1), .la-pacman > div:nth-child(2) {
	width: 0;
	height: 0;
	background: transparent;
	border-style: solid;
	border-width: 16px;
	border-right-color: transparent;
	border-radius: 100%;
	-webkit-animation: pacman-rotate-half-up 0.5s 0s infinite;
	-moz-animation: pacman-rotate-half-up 0.5s 0s infinite;
	-o-animation: pacman-rotate-half-up 0.5s 0s infinite;
	animation: pacman-rotate-half-up 0.5s 0s infinite
}

.la-pacman > div:nth-child(2) {
	margin-top: -32px;
	-webkit-animation-name: pacman-rotate-half-down;
	-moz-animation-name: pacman-rotate-half-down;
	-o-animation-name: pacman-rotate-half-down;
	animation-name: pacman-rotate-half-down
}

.la-pacman > div:nth-child(3), .la-pacman > div:nth-child(4), .la-pacman > div:nth-child(5), .la-pacman > div:nth-child(6) {
	position: absolute;
	top: 50%;
	left: 200%;
	width: 8px;
	height: 8px;
	border-radius: 100%;
	opacity: 0;
	-webkit-animation: pacman-balls 2s 0s infinite linear;
	-moz-animation: pacman-balls 2s 0s infinite linear;
	-o-animation: pacman-balls 2s 0s infinite linear;
	animation: pacman-balls 2s 0s infinite linear
}

.la-pacman > div:nth-child(3) {
	-webkit-animation-delay: -1.44s;
	-moz-animation-delay: -1.44s;
	-o-animation-delay: -1.44s;
	animation-delay: -1.44s
}

.la-pacman > div:nth-child(4) {
	-webkit-animation-delay: -1.94s;
	-moz-animation-delay: -1.94s;
	-o-animation-delay: -1.94s;
	animation-delay: -1.94s
}

.la-pacman > div:nth-child(5) {
	-webkit-animation-delay: -2.44s;
	-moz-animation-delay: -2.44s;
	-o-animation-delay: -2.44s;
	animation-delay: -2.44s
}

.la-pacman > div:nth-child(6) {
	-webkit-animation-delay: -2.94s;
	-moz-animation-delay: -2.94s;
	-o-animation-delay: -2.94s;
	animation-delay: -2.94s
}

.la-pacman.la-sm {
	width: 16px;
	height: 16px
}

.la-pacman.la-sm > div:nth-child(1), .la-pacman.la-sm > div:nth-child(2) {
	border-width: 8px
}

.la-pacman.la-sm > div:nth-child(2) {
	margin-top: -16px
}

.la-pacman.la-sm > div:nth-child(3), .la-pacman.la-sm > div:nth-child(4), .la-pacman.la-sm > div:nth-child(5), .la-pacman.la-sm > div:nth-child(6) {
	width: 4px;
	height: 4px
}

.la-pacman.la-2x {
	width: 64px;
	height: 64px
}

.la-pacman.la-2x > div:nth-child(1), .la-pacman.la-2x > div:nth-child(2) {
	border-width: 32px
}

.la-pacman.la-2x > div:nth-child(2) {
	margin-top: -64px
}

.la-pacman.la-2x > div:nth-child(3), .la-pacman.la-2x > div:nth-child(4), .la-pacman.la-2x > div:nth-child(5), .la-pacman.la-2x > div:nth-child(6) {
	width: 16px;
	height: 16px
}

.la-pacman.la-3x {
	width: 96px;
	height: 96px
}

.la-pacman.la-3x > div:nth-child(1), .la-pacman.la-3x > div:nth-child(2) {
	border-width: 48px
}

.la-pacman.la-3x > div:nth-child(2) {
	margin-top: -96px
}

.la-pacman.la-3x > div:nth-child(3), .la-pacman.la-3x > div:nth-child(4), .la-pacman.la-3x > div:nth-child(5), .la-pacman.la-3x > div:nth-child(6) {
	width: 24px;
	height: 24px
}

@-webkit-keyframes pacman-rotate-half-up {
	0%, 100% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg)
	}
	50% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-moz-keyframes pacman-rotate-half-up {
	0%, 100% {
		-moz-transform: rotate(270deg);
		transform: rotate(270deg)
	}
	50% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-o-keyframes pacman-rotate-half-up {
	0%, 100% {
		-o-transform: rotate(270deg);
		transform: rotate(270deg)
	}
	50% {
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes pacman-rotate-half-up {
	0%, 100% {
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		transform: rotate(270deg)
	}
	50% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-webkit-keyframes pacman-rotate-half-down {
	0%, 100% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg)
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@-moz-keyframes pacman-rotate-half-down {
	0%, 100% {
		-moz-transform: rotate(90deg);
		transform: rotate(90deg)
	}
	50% {
		-moz-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@-o-keyframes pacman-rotate-half-down {
	0%, 100% {
		-o-transform: rotate(90deg);
		transform: rotate(90deg)
	}
	50% {
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@keyframes pacman-rotate-half-down {
	0%, 100% {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg)
	}
	50% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@-webkit-keyframes pacman-balls {
	0% {
		left: 200%;
		opacity: 0;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%)
	}
	5% {
		opacity: .5
	}
	66% {
		opacity: 1
	}
	67% {
		opacity: 0
	}
	100% {
		left: 0;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%)
	}
}

@-moz-keyframes pacman-balls {
	0% {
		left: 200%;
		opacity: 0;
		-moz-transform: translateY(-50%);
		transform: translateY(-50%)
	}
	5% {
		opacity: .5
	}
	66% {
		opacity: 1
	}
	67% {
		opacity: 0
	}
	100% {
		left: 0;
		-moz-transform: translateY(-50%);
		transform: translateY(-50%)
	}
}

@-o-keyframes pacman-balls {
	0% {
		left: 200%;
		opacity: 0;
		-o-transform: translateY(-50%);
		transform: translateY(-50%)
	}
	5% {
		opacity: .5
	}
	66% {
		opacity: 1
	}
	67% {
		opacity: 0
	}
	100% {
		left: 0;
		-o-transform: translateY(-50%);
		transform: translateY(-50%)
	}
}

@keyframes pacman-balls {
	0% {
		left: 200%;
		opacity: 0;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%)
	}
	5% {
		opacity: .5
	}
	66% {
		opacity: 1
	}
	67% {
		opacity: 0
	}
	100% {
		left: 0;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%)
	}
}
</style>
